<template>
  <div class="ytgl">
    <div class="ytgl2">
      <div class="head">
        <h4 style="margin-top: 10px">押金标准配置</h4>
        <header>
          <div class="header-left">
            <p>押金标准</p>
            <p>30元/桶</p>
            <p style="color: #409EFF" @click="centerDialogVisible3 = true"><i class="el-icon-edit"></i> 修改</p>
          </div>
          <div class="header-right" @click="yajin">
            历史变更 <i class="el-icon-caret-bottom"></i>
          </div>
        </header>
      </div>
      <div class="tongji">
        <el-form class="con-form" ref="form" :model="form" label-width="80px">
          <el-form-item label="模板名称" required>
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <h4>统计信息</h4>
        <div class="content">
          <div class="con-left">
            <div class="con-cl">
              <p>押金数</p>
              <p>3,000,000.00/元</p>
              <p>押桶数:3,000/桶</p>
              <div style="line-height: 45px" @click="ytmx">
                查看明细<i class="el-icon-caret-right"></i>
              </div>
            </div>

            <div class="taocan">
              <el-table :data="tableData">
                <el-table-column
                  prop="date"
                  label="序号"
                  align="center"
                  width="180"
                >
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="分公司名"
                  align="center"
                  width="180"
                >
                </el-table-column>
                <el-table-column prop="address" align="center" label="押金数 ">
                </el-table-column>
                <el-table-column prop="address2" label="押桶数 " align="center">
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="con-right">
            <div
              id="myChart"
              :style="{ width: '300px', height: '300px' }"
            ></div>
            <el-pagination
              background
              layout="prev, pager, next"
              :total="100"
              style="margin-left: 20%"
            >
            </el-pagination>
          </div>
        </div>
      </div>

      <div class="list">
        <h4>用户押桶列表</h4>
        <div class="list-content">
          <div class="lc-head">
            <el-input
              placeholder="输入手机号/微信号"
              prefix-icon="el-icon-search"
              style="width: 200px; margin-right: 50px"
            >
            </el-input>
            <el-button type="primary" style="width: 100px; height: 40px"
              >搜索</el-button
            >
          </div>
        </div>

        <div class="content" style="margin: 0 0 30px 0">
          <el-table
            :data="tableData2"
            style="width: 100%"
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column label="用户账号" prop="zhanghao" width="260">
            </el-table-column>
            <el-table-column prop="danjia" label="姓名" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="date" label="地址数" sortable width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              label="押金数"
              sortable
              :formatter="formatter"
            >
            </el-table-column>
            <el-table-column prop="name" label="押桶数" sortable width="280">
            </el-table-column>
            <el-table-column label="操作"  align="center" width="300">
              <template>
                <el-button
                  type="text"
                  size="small"
                  @click="centerDialogVisible = true"
                  >退押金</el-button
                >

                <el-button type="text" size="small" style="margin: 0 12px" @click="tjmx"
                  >明细</el-button
                >
               
                <el-button type="text" size="small" style="margin: 0 12px"   @click="centerDialogVisible4 = true"
                  >补录押金</el-button>
                <el-button type="text" size="small" style="margin: 0 12px" @click="centerDialogVisible6 = true"
                  >押金条备注</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="100"
          style="float: right; margin-right: 10%"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="后台退押金"
      :visible.sync="centerDialogVisible"
      width="65%"
    >
      <div class="pop" style="height: 560px">
        <div style="height: 40px; font-size: 18px">选择一个退押的地址</div>
        <el-table
          :data="tableData3"
          style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column label="收货地址" prop="zhanghao" width="360">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.zhanghao.radio" label="1"
                ><span style="line-height: 20px">{{
                  scope.row.zhanghao && scope.row.zhanghao.name
                }}</span>
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="danjia" label="联系人" :formatter="formatter">
          </el-table-column>
          <el-table-column prop="date" label="联系方式" width="180">
          </el-table-column>
          <el-table-column prop="address" label="押桶数" :formatter="formatter">
          </el-table-column>
          <el-table-column prop="name" label="押金数" width="280">
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible2 = true"
          >下一步</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="后台退押金"
      :visible.sync="centerDialogVisible2"
      width="65%"
    >
      <div class="pop" style="height: 560px">
        <el-table
          :data="tableData4"
          style="
            width: 100%;
            height: 360px;
            overflow-y: auto;
            margin-bottom: 30px;
          "
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="桶商品" width="360">
            <template slot-scope="scope">
              <p style="margin: 0">
                {{ scope.row.item && scope.row.item.bianhao }}
              </p>
              <div style="display: flex">
                <img
                  style="width: 80px; height: 60px"
                  :src="scope.row.item && scope.row.item.img"
                  alt=""
                />
                <p style="line-height: 80px; margin: 0">
                  {{ scope.row.item && scope.row.item.shop }}
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="danjia" label="押金数" width="120">
          </el-table-column>
          <el-table-column prop="date" label="押桶数" width="120">
          </el-table-column>
          <el-table-column label="核销押桶 " :formatter="formatter">
            <el-input
              v-model="input"
              placeholder="不能大于押桶数"
              style="width: 160px"
            ></el-input>
          </el-table-column>
          <el-table-column label="是否回桶" width="300">
            <div style="display: flex; height: 40px; margin: 0 0 10px 0">
              <el-radio v-model="radio2" label="1" style="line-height: 40px"
                >回</el-radio
              >
              <el-form class="demo-form-inline">
                <el-select
                  v-model="region"
                  placeholder="退押金"
                  style="width: 100px; margin: 0"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form>
            </div>
            <div style="height: 30px">
              <el-radio v-model="radio2" label="2">不回</el-radio>
            </div>
          </el-table-column>
        </el-table>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="备注: ">
            <el-input type="textarea" v-model="form.desc" :rows="5"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible2 = false"
          ><span @click="centerDialogVisible = false">确定</span>
        </el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="修改押金标准 "
      :visible.sync="centerDialogVisible3"
      width="65%"
    >
      <div class="pop" style="height: 460px">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
           <el-form-item label="押桶标准" >
               <el-input v-model="formInline.user" placeholder="请输入0至9999.99的数字,小数保留两位"></el-input> 
          </el-form-item>
           <el-form-item>/元</el-form-item>
        </el-form>
       
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button >取 消</el-button>
        <el-button type="primary" 
          ><span >确定</span>
        </el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="补录押金"
      :visible.sync="centerDialogVisible4"
      width="65%"
    >
      <div class="pop" style="height: 560px">
        <div style="height: 40px; font-size: 18px">选择一个要录入押金的地址</div>
        <el-table
          :data="tableData5"
          style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column label="收货地址" prop="zhanghao" width="360">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.zhanghao.radio" label="1"
                ><span style="line-height: 20px">{{
                  scope.row.zhanghao && scope.row.zhanghao.name
                }}</span>
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="danjia" label="联系人" :formatter="formatter">
          </el-table-column>
          <el-table-column prop="date" label="联系方式" width="180">
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible4 = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible5 = true"
          >下一步</el-button
        >
      </span>
    </el-dialog>

     <el-dialog
      title="补录押金"
      :visible.sync="centerDialogVisible5"
      width="65%"
    >
      <div class="pop" style="height: 560px">
        <el-table :data="tableData6" style="margin:0 0 30px 0">
        <el-table-column
          prop="date"
          label="收货地址"
          align="center"
          width="320"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="联系人"
          align="center"
          width="220"
        >
        </el-table-column>
        <el-table-column prop="address" align="center" label="联系电话 ">
        </el-table-column>
      </el-table>

        <div style="margin:0 0 30px 0">
          <el-button type="primary" style="float:right">添加商品</el-button>
        </div>

        <el-table
            :data="tableData7"
            style="width: 100%"
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column label="桶装水商品" width="360">
              <template slot-scope="scope">
                <p style="margin: 0">
                  {{ scope.row.item && scope.row.item.bianhao }}
                </p>
                <div style="display: flex">
                  <img
                    style="width: 80px; height: 60px"
                    :src="scope.row.item && scope.row.item.img"
                    alt=""
                  />
                  <p style="line-height: 80px; margin: 0">
                    {{ scope.row.item && scope.row.item.shop }}
                  </p>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="danjia" label="押金标准">
              <el-input v-model="input" placeholder="请输入押金标准" style="width:140px"></el-input>
            </el-table-column>
            <el-table-column prop="date" label="押桶数"  >
              <el-input v-model="input" placeholder="请输入押金桶数" style="width:140px"></el-input>
            </el-table-column>
            <el-table-column prop="address" label="押金数">
              <el-input v-model="input" placeholder="自动计算押金数" style="width:140px"></el-input> <i class="el-icon-delete" style="font-weight: 600;font-size:20px"></i>
            </el-table-column>

          </el-table>
          <p style="color:red">注：后台补录水票仅能使用线下支付，无法使用线上支付。</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible5 = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible5 = false"
          ><span @click="centerDialogVisible4 = false">确定</span>
        </el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="编辑押金条备注"
      :visible.sync="centerDialogVisible6"
      width="65%"
    >
      <div class="pop" style="height: 560px">
        <div style="height: 40px; font-size: 18px">选择一个押金地址</div>
       <el-table
          :data="tableData8"
          style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column label="收货地址" prop="zhanghao" width="360">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.zhanghao.radio" label="1"
                ><span style="line-height: 20px">{{
                  scope.row.zhanghao && scope.row.zhanghao.name
                }}</span>
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="danjia" label="联系人" >
          </el-table-column>
          <el-table-column prop="date" label="联系方式" width="180">
          </el-table-column>
           <el-table-column prop="yatong" label="押桶" width="180">
          </el-table-column>
           <el-table-column prop="yajin" label="押金" width="180">
          </el-table-column>
        </el-table>


      </div>
       <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible6 = false">取 消</el-button>
        <el-button type="primary" @click="edit"
          >下一步</el-button
        >
      </span>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible6 = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible6 = false"
          ><span @click="centerDialogVisible5 = false">确定</span>
        </el-button>
      </span> -->
    </el-dialog>

  
  </div>
</template>

<script>
export default {
  data() {
    return {
      centerDialogVisible: false,
      centerDialogVisible2: false,
      centerDialogVisible3: false,
      centerDialogVisible4: false,
      centerDialogVisible5:false,
      centerDialogVisible6:false,
      centerDialogVisible7:false,
      radio2: "1",
      form: {
        name: "0",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
       formInline: {
          user: '30.00',
          region: ''
        },
      tableData: [
        {
          date: "1",
          name: "XXX分公司1",
          address: "2,234,00",
          address2: "2019",
        },
        {
          date: "2",
          name: "XXX分公司2",
          address: "2,234,00",
          address2: "2019",
        },
        {
          date: "3",
          name: "XXX分公司2",
          address: "2,234,00",
          address2: "2019",
        },
        {
          date: "4",
          name: "XXX分公司2",
          address: "2,234,00",
          address2: "2019",
        },
        {
          date: "5",
          name: "XXX分公司2",
          address: "2,234,00",
          address2: "2019",
        },
      ],
      tableData2: [
        {
          date: "2",
          name: "10,000",
          address: "30",
          danjia: 239,
          zhanghao: "13581308299",
        },
        {
          date: "2",
          name: "10,000",
          address: "20",
          danjia: 238,
          zhanghao: "13581308299",
        },
        {
          date: "3",
          name: "10,000",
          address: "40",
          danjia: 237,
          zhanghao: "13581308299",
        },
      ],
      tableData3: [
        {
          date: "2",
          name: "10,000",
          address: "30",
          danjia: 239,
          zhanghao: {
            radio: 1,
            name: "湖北省武汉市XXXXXXxxxxxxxxxx",
          },
        },
        {
          date: "2",
          name: "10,000",
          address: "20",
          danjia: 238,
          zhanghao: {
            radio: 3,
            name: "湖北省鄂州市XXXXXXxxxxxxxxxx",
          },
        },
        {
          date: "3",
          name: "10,000",
          address: "40",
          danjia: 237,
          zhanghao: {
            radio: 2,
            name: "湖北省黄冈市XXXXXXxxxxxxxxx",
          },
        },
      ],
      tableData4: [
        {
          date: "02",

          danjia: 239,
          item: {
            bianhao: "商品编号：1232312312222222222",
            img:
              "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            shop: "XXXXXXXxxxxxxx商品…",
          },
        },
        {
          date: "04",

          danjia: 238,
          item: {
            bianhao: "商品编号：1232312312222222222",
            img:
              "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            shop: "XXXXXXXxxxxxxx商品…",
          },
        },
        {
          date: "01",

          danjia: 237,
          item: {
            bianhao: "商品编号：1232312312222222222",
            img:
              "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            shop: "XXXXXXXxxxxxxx商品…",
          },
        },
      ],
      tableData5: [
        {
          date: "2",
          danjia: 239,
          zhanghao: {
            radio: 1,
            name: "湖北省武汉市XXXXXXxxxxxxxxxx",
          },
        },
        {
          date: "2",
          danjia: 238,
          zhanghao: {
            radio: 3,
            name: "湖北省鄂州市XXXXXXxxxxxxxxxx",
          },
        },
        {
          date: "3",
          danjia: 237,
          zhanghao: {
            radio: 2,
            name: "湖北省黄冈市XXXXXXxxxxxxxxx",
          },
        },
      ],
      tableData6:[
         {
          date: "湖北省武汉市XXXXXXxxxxxxxxxx",
          name: "吴彦祖",
          address: "13581308299",
        },
      ],
       tableData7: [
        {
          date: "",
          address: "",
          danjia: '',
          item: {
            bianhao: "商品编号：1232312312222222222",
            img:
              "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            shop: "XXXXXXXxxxxxxx商品…",
          },
        },
        {
          date: "",
          address: "",
          danjia: '',
          item: {
            bianhao: "商品编号：1232312312222222222",
            img:
              "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            shop: "XXXXXXXxxxxxxx商品…",
          },
        },
  
      ],
       tableData8: [
        {
          date: "2",
          danjia: 239,
          yatong:"2  /桶",
          yajin:"20  /元",
          zhanghao: {
            radio: 1,
            name: "湖北省武汉市XXXXXXxxxxxxxxxx",
          },
        },
        {
          date: "2",
          danjia: 238,
           yatong:"2  /桶",
          yajin:"20  /元",
          zhanghao: {
            radio: 3,
            name: "湖北省鄂州市XXXXXXxxxxxxxxxx",
          },
        },
        {
          date: "3",
          danjia: 237,
           yatong:"2  /桶",
          yajin:"20  /元",
          zhanghao: {
            radio: 2,
            name: "湖北省黄冈市XXXXXXxxxxxxxxx",
          },
        },
      ],

    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "押桶统计图" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
    },
    tjmx(){
      this.$router.push({path:"/tongzhuangshui/tongjimingxi"})
    },
    yajin(){
      this.$router.push({path:"/tongzhuangshui/yajinlishi"})
    },
    ytmx(){
      this.$router.push({path:"/tongzhuangshui/yatongmingxi"})
    },
    edit(){
      this.$router.push({path:"/tongzhuangshui/edityjt"})
    }
  },
};
</script>

<style lang="scss" scoped>
.ytgl {
  width: 98%;
  overflow: hidden;
  margin: 1%;
  font-weight: 600;

  .ytgl2 {
    .head {
      padding: 0 4%;
      height: 100px;
      margin-bottom: 20px;
      background-color: #fff;
      border-radius: 6px;
      overflow: hidden;
      .p1 {
        height: 40px;
        line-height: 40px;
        margin: 0;
        font-size: 18px;
      }
      header {
        width: 100%;
        height: 40px;
        background-color: #f0f0f0;
        display: flex;
        justify-content: space-between;
        .header-left {
          width: 30%;
          display: flex;
          justify-content: space-around;
        }
        .header-right {
          line-height: 40px;
          width: 15%;
          margin-left: 50%;
        }
      }
    }
    .tongji {
      padding: 0 4%;
      height: 540px;
      margin-bottom: 20px;
      background-color: #fff;
      border-radius: 6px;
      overflow: hidden;
      .con-form {
        margin-top: 20px;
      }
      .content {
        width: 100%;
        height: 300px;
        display: flex;
        .con-left {
          width: 60%;
          .con-cl {
            width: 100%;
            height: 40px;
            // line-height: 40px;
            background-color: #f0f0f0;
            display: flex;
            justify-content: space-around;
          }
        }
        .con-right {
          #myChart {
            width: 80%;
            margin: 20px 0 30px 30%;
          }
        }
      }
    }
    .list {
      padding: 0 4%;
      height: 540px;
      margin-bottom: 20px;
      background-color: #fff;
      border-radius: 6px;
      overflow: hidden;
      .list-content {
        width: 100%;
        overflow: hidden;
        .lc-head {
          display: flex;
          margin: 0 0 20px 0;
        }
      }
    }
  }
}
</style>